@use "@/styles/ScreenSizes.module.scss";
@use "@/styles/Spacings.module.scss";
@use "@/styles/Typography.module.scss";

.brain_types_wrapper {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  width: 100%;
  padding-inline: Spacings.$spacing08;
  height: 100%;
  gap: Spacings.$spacing05;
  overflow-y: hidden;
  overflow-x: visible;

  @media (max-width: ScreenSizes.$small) {
    padding-inline: 0;
  }

  .main_wrapper {
    display: flex;
    flex-direction: column;
    gap: Spacings.$spacing05;
    padding-top: Spacings.$spacing03;
    overflow-y: scroll;
    overflow-x: visible;

    .title {
      @include Typography.H2;
    }
  }

  .buttons_wrapper {
    align-self: flex-end;

    &.two_buttons {
      display: flex;
      justify-content: space-between;
      align-self: normal;
    }
  }
}
